<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript">var CTP_WEB_FULLPATH = "../../"</script>
        <script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jquery/jquery-migrate.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/ctp.core.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/public/ctp.base.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/public/ctp.ui.component.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js">
        </script>	
        <script type="text/javascript" src="../../js/ctp/image/ctp.ui.image.js">
        </script>	
        
		<script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js"></script>		
		
		<link href='../../css/jquery/ui.core.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/jquery/ui.theme.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/skins/standard/ctp-common.css' rel='stylesheet' type='text/css'/>		
        <link href="../../css-debug/panel.css" rel="stylesheet" type="text/css"/>
        <link href="../../css-debug/button.css" rel="stylesheet" type="text/css"/>
		<link href="../../css-debug/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css-debug/gridlayout.css" rel="stylesheet" type="text/css"/>
		<link href="../../css-debug/messagebox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css-debug/image.css" rel="stylesheet" type="text/css"/>
		
        <script>
            // ctp.core.log.lvl=ctp.core.loglvl.info;            
            $(document).ready(function(){ 			                 
				var image1 = new ctp.ui.image({
                    id: 'image1',
                    width:'160px',
					height:'160px',
					hasBorder:false,
					disabled:false,
					onClick:function(){alert(43434)},
					imgSrc:'../../images/blue/grid/load.gif',
					titleTip:'ee'
                });
                var button1=new ctp.ui.button({
                    id: 'button1',
                    text: '获取图片路径',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({title:'信息提示',message:image1.getImgSrc()});
                    }
                });
                var button2=new ctp.ui.button({
                    id: 'button2',
                    text: '设置图片路径',
                    width: '100%',
                    onClick: function(){
                        image1.setImgSrc('../demoimages/media.jpg');
                    }
                });
                var button3= new ctp.ui.button({
                    id: 'button3',
                    text: '设置宽度',
                    width: '100%',
                    onClick: function(){
                        image1.setWidth('100px');
                    }
                });
                var button4= new ctp.ui.button({
                    id: 'button4',
                    text: '获取宽度',
                    width: '100%',
                    onClick: function(){
                    	ctpMSB.alert({title:'信息提示',message:image1.getWidth()});
                    }
                });
                var button5=new ctp.ui.button({
                    id: 'button5',
                    text: '隐藏组件',
                    width: '100%',
                    onClick: function(){
                        image1.setVisible(false);
                    }
                });
                var button6=new ctp.ui.button({
                    id: 'button6',
                    text: '显示组件',
                    width: '100%',
                    onClick: function(){
                        image1.setVisible(true);
                    }
                });
				var button7= new ctp.ui.button({
                    id: 'button7',
                    text: '取得按钮ID',
                    width: '100%',
                    onClick: function(){						
						ctpMSB.alert({title:'信息提示',message:image1.getId()});                       
                    }
                });
				var button8= new ctp.ui.button({
                    id: 'button8',
                    text: '取得按钮名称',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'信息提示',message:image1.getName()});						                        
                    }
                });
				var button9= new ctp.ui.button({
                    id: 'button9',
                    text: '取得组件类型',
                    width: '100%',
                    onClick: function(){						  
						ctpMSB.alert({title:'信息提示',message:image1.getCtpWebType()});                      
                    }
                });
                var button10= new ctp.ui.button({
                    id: 'button10',
                    text: '获取高度',
                    width: '100%',
                    onClick: function(){						  
						ctpMSB.alert({title:'信息提示',message:image1.getHeight()});                      
                    }
                });
                var button11= new ctp.ui.button({
                    id: 'button11',
                    text: '设置高度',
                    width: '100%',
                    onClick: function(){						  
						image1.setHeight('100px');
                    }
                });
                var button12= new ctp.ui.button({
                    id: 'button12',
                    text: '获取组件是否显示',
                    width: '100%',
                    onClick: function(){						  
						ctpMSB.alert({title:'信息提示',message:image1.getVisible()});
                    }
                });
                var button13= new ctp.ui.button({
                    id: 'button13',
                    text: '获取组件是否禁用',
                    width: '100%',
                    onClick: function(){						  
						ctpMSB.alert({title:'信息提示',message:image1.isDisable()});
                    }
                });
				var button14= new ctp.ui.button({
                    id: 'button14',
                    text: '设置组件禁用',
                    width: '100%',
                    onClick: function(){						  
						image1.setDisable(true);
                    }
                });
				var button15= new ctp.ui.button({
                    id: 'button15',
                    text: '设置组件启用',
                    width: '100%',
                    onClick: function(){						  
						image1.setDisable(false);
                    }
                });
				var button16= new ctp.ui.button({
                    id: 'button16',
                    text: '设置组件事件',
                    width: '100%',
                    onClick: function(){						  
						image1.onClick(function(){alert('你点击了');});
                    }
                });
				var button17 = new ctp.ui.button({
					id:'button17',
					text: '测试',
                    width: '100%',
                    onClick: function(){						  
						var test = [];
						test.push('ctpPackage: '+image1.ctpPackage+'\n');
						//test.push('getTemplate: '+image1.getTemplate({})+'\n');
						test.push('initEvent: '+image1.initEvent()+'\n');
						test.push('initSettings: '+image1.initSettings+'\n');
						test.push('isContainer: '+image1.isContainer+'\n');
						test.push('isHidden: '+image1.isHidden+'\n');
						test.push('isNeedRender: '+image1.isNeedRender+'\n');
						test.push('isNeedReset: '+image1.isNeedReset+'\n');
						test.push('jqDom: '+image1.jqDom+'\n');
						test.push('resize: '+image1.resize()+'\n');
						test.push('settings: '+image1.settings+'\n');
						test.push('type: '+image1.type+'\n');
						test.push('version: '+image1.version+'\n');
						//test.push('rendered: '+image1.rendered+'\n');
						//test.push('renderTo: '+image1.renderTo()+'\n');
						//test.push('render: '+image1.render()+'\n');
						//test.push('remove: '+image1.remove()+'\n');
						alert(test.join(''));

						test = [];
						//test.push('afterInit: '+image1.afterInit()+'\n');
						//test.push('destroy: '+image1.destroy()+'\n');
						test.push('getCtpWebType: '+image1.getCtpWebType()+'\n');
						test.push('getDefaultSettings: '+image1.getDefaultSettings()+'\n');
						test.push('getDomId: '+image1.getDomId()+'\n');
						test.push('getFnContext: '+image1.getFnContext()+'\n');
						test.push('getHeight: '+image1.getHeight()+'\n');
						test.push('getId: '+image1.getId()+'\n');
						test.push('getInitSettings: '+image1.getInitSettings()+'\n');
						test.push('getJqDom: '+image1.getJqDom()+'\n');
						test.push('getName: '+image1.getName()+'\n');
						test.push('getPkgContext: '+image1.getPkgContext()+'\n');
						test.push('getSettings: '+image1.getSettings()+'\n');
						test.push('getWidth: '+image1.getWidth()+'\n');
						test.push('hide: '+image1.hide()+'\n');
						alert('hide')
						//test.push('init: '+image1.init()+'\n');
						test.push('removeJqDoms: '+image1.removeJqDoms()+'\n');
						test.push('setWidth: '+image1.setWidth('400px')+ ' ' + (image1.getWidth()==400) +'\n');
						test.push('setHeight: '+image1.setHeight('50px')+ ' ' + (image1.getHeight()==50) + '\n');
						test.push('setSize: '+image1.setSize('400px','100px')+ ' ' + (image1.getHeight()==100 && image1.getWidth()==400) + '\n');
						test.push('show: '+image1.show()+'\n');
						alert('show')
						alert(test.join(''));

						test = [];
						//test.push('getTitleTemplate: '+image1.getTitleTemplate({})+'\n');
						test.push('isDisable: '+image1.isDisable()+'\n');
						test.push('setDisable: '+image1.setDisable(true)+'\n');
						test.push('getImgSrc: '+image1.getImgSrc()+'\n');
						test.push('setImgSrc: '+image1.setImgSrc());
						alert('setImgSrc()');
						test.push('setImgSrc: '+image1.setImgSrc('../../images/blue/grid/load.gif')+'\n');
						alert('setImgSrc(load.gif)');
						test.push('getVisible: '+image1.getVisible()+'\n');
						test.push('setVisible: '+image1.setVisible(true)+ ' '+ (image1.isHidden ==false) +'\n');
						test.push('onClick: '+image1.onClick(function(){alert('hello')},false)+'\n');
						test.push('remove: '+image1.remove()+'\n');
						alert(test.join(''));
                    }
				});
                var showLayout = new ctp.ui.gridlayout({
					id:'showLayout',
                    width: '100%',
                    cols: 1,
                    align: 'center',
                    colSpace: 30,
                    items: [[{element: image1}]]
                
                });  
				var showGroupbox=new ctp.ui.groupbox({
			  	    id: 'showGroupbox',						
					items:[showLayout],
					title:'效果展示区'						   
			     });
				var buttonsLayout = new ctp.ui.gridlayout({
					id:'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [
					     [{element: button1},{element: button2},{element: button3}],
						 [{element: button4},{element: button5},{element: button6}],
						 [{element: button7},{element: button8},{element: button9}],
						 [{element: button10},{element: button11},{element: button12}],
						 [{element: button13},{element: button14},{element: button15}],
						 [{element: button16},{element: button17}]
					]
                }); 
				var buttonsGroupbox=new ctp.ui.groupbox({
			  	    id: 'buttonsGroupbox',						
					items:[buttonsLayout],
					width:'100%',
					title:'功能测试区'						   
			     });
				new ctp.ui.panel({
                    title: 'image实例',
                    collapsible: true,
                    width: '550px',
                    height: 'auto',
					align:'center',
					items:[showGroupbox,buttonsGroupbox],
                    renderTo: 'body'
                });            
            });
        </script>
    </head>
    <BODY>
        <b>ctp.ui.image 实例</b>
        <hr/>
        <br/>  
    </BODY>
</html>
